<template>
  <div class="group">
    <div
      v-show="!statusSourceConfig"
      class="chart-container"
      @click="emit('click-server')"
      @mouseenter="comMouseEnter"
      @mouseleave="hideContent"
    >
      <div class="title">
        <div class="title-h2">
          <h2 style="cursor: pointer; font-weight: 400">
            服务器
            <div class="red-dot red-position"></div>
          </h2>
        </div>
        <div>
          <!-- <VerticalCarousel :image-urls="'static/iconjsjw.png'" /> -->
        </div>
      </div>
      <div class="Content" :class="{ 'content-visible': showContent }">
        <div class="Content-item">
          <div style="z-index: 1001" ref="chartRefo" class="container"></div>
          <div
            style="z-index: 1002"
            ref="chartReft"
            class="containerArea"
          ></div>
        </div>
      </div>
    </div>
    <div
      v-show="!statusSourceConfig"
      class="chart-container"
      @mouseenter="dongLiMouseEnter"
      @mouseleave="dongLiMouseLeave"
    >
      <div class="title">
        <div class="title-h2">
          <h2 style="font-weight: 400">交换机</h2>
        </div>
      </div>
      <div class="Content" :class="{ 'content-visible': showContentTuo }">
        <div class="Content-item">
          <div style="z-index: 1001" ref="chartRef1" class="container"></div>
          <div
            style="z-index: 1002"
            ref="chartRef2"
            class="containerArea"
          ></div>
        </div>
      </div>
    </div>
    <div
      v-show="!statusSourceConfig"
      class="chart-container"
      @mouseenter="guangDianMouseEnter"
      @mouseleave="guangDianMouseLeave"
    >
      <div class="title">
        <div class="title-h2">
          <h2 style="font-weight: 400">路由器</h2>
        </div>
      </div>
      <div class="Content" :class="{ 'content-visible': showContentguangDian }">
        <div class="Content-item">
          <div style="z-index: 1001" ref="chartRef5" class="container"></div>
          <div
            style="z-index: 1002"
            ref="chartRef6"
            class="containerArea"
          ></div>
        </div>
      </div>
    </div>
    <div class="chart-container" v-show="!statusSourceConfig">
      <div class="title" @click="statusSourceConfig = true">
        <div class="title-h2">
          <h2 style="font-weight: 400">数据源配置</h2>
        </div>
      </div>
    </div>
    <!-- 数据配置模块 -->
    <div class="tree" v-if="statusSourceConfig">
      <DataSourceConfig  @close="statusSourceConfig = false" />
    </div>
  </div>
</template>

<script setup>
import DataSourceConfig from "../DataSourceConfig.vue";
// import EChartsPieChart from "../popUpPage/popUpPage.vue";
// import VerticalCarousel from '../VerticalCarousel.vue';
import { ref, onMounted, onUnmounted, defineEmits } from "vue";
import * as echarts from "echarts";
const statusSourceConfig = ref(false);
const optionxxx = {
  // backgroundColor: '#1e44879f',
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    itemWidth: 10,
    itemHeight: 10,
    orient: "vertical",
    left: 0,
    top: "16%",
    // size: 10,
    textStyle: {
      color: "#fff",
      fontSize: 15,
    },
  },
  series: [
    {
      name: "详细数据",
      type: "pie",
      radius: ["70%", "50%"],
      // avoidLabelOverlap: true,
      right: "-30%",
      label: {
        show: true,
        formatter: "{d}%",
        textStyle: {
          color: "#fff",
          fontSize: 15,
        },
      },
      emphasis: {
        focus: "self",
        label: {
          show: true,
          fontSize: 10,
          fontWeight: "bold",
          color: "#fff",
        },
      },
      data: [
        { value: 42, name: "正常运行", itemStyle: { color: "#91CC75" } },
        { value: 14, name: "正常待机", itemStyle: { color: "#5470C6" } },
        { value: 40, name: "需要维护", itemStyle: { color: "#edef51" } },
        { value: 4, name: "需要维修", itemStyle: { color: "#d21414" } },
      ],
    },
  ],
};
const option2xxx = {
  // backgroundColor: '#1e44879f',
  color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
  title: {
    text: "实时能耗",
    top: "5%",
    left: "5%",
    textStyle: {
      fontSize: 20,
      color: "#fff",
      fontWeight: 400,
    },
  },
  tooltip: {
    show: false,
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  grid: {
    left: "-20%",
    right: "4%",
    bottom: 0,
    top: "25%",
    containLabel: true,
  },
  xAxis: [
    {
      show: false,
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
  ],
  yAxis: [
    {
      show: false,
      type: "value",
    },
  ],
  series: [
    {
      name: "Line 1",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(128, 255, 165)",
          },
          {
            offset: 1,
            color: "rgb(1, 191, 236)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [140, 232, 101, 264, 90, 340, 250],
    },
    {
      name: "Line 2",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(0, 221, 255)",
          },
          {
            offset: 1,
            color: "rgb(77, 119, 255)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [120, 282, 111, 234, 220, 340, 310],
    },
    {
      name: "Line 3",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(55, 162, 255)",
          },
          {
            offset: 1,
            color: "rgb(116, 21, 219)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [320, 132, 201, 334, 190, 130, 220],
    },
    {
      name: "Line 4",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(255, 0, 135)",
          },
          {
            offset: 1,
            color: "rgb(135, 0, 157)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [220, 402, 231, 134, 190, 230, 120],
    },
    {
      name: "Line 5",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      label: {
        show: true,
        position: "top",
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(255, 191, 0)",
          },
          {
            offset: 1,
            color: "rgb(224, 62, 76)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [220, 302, 181, 234, 210, 290, 150],
    },
  ],
};

const emit = defineEmits(["click-Computer"]);
const showContent = ref(false);
const showContentTuo = ref(false);
const showContentguangDian = ref(false);
const popupVisible1 = ref(null);
const popupVisible2 = ref(null);
const popupVisible3 = ref(null);

//条形ui
const chartRefo = ref(null);
const chartReft = ref(null);
let myChart1 = null;
let myChart2 = null;
//第二组
const chartRef1 = ref(null);
const chartRef2 = ref(null);
const chartRef5 = ref(null);
const chartRef6 = ref(null);
let myChart01 = null;
let myChart02 = null;
let myChart05 = null;
let myChart06 = null;

function comMouseEnter() {
  showContent.value = true;
  // emit('handleMouseEnter')
}
// 隐藏弹框
function hideContent() {
  // emit('handleMouseLeave')
  showContent.value = false;
  popupVisible1.value = null;
  popupVisible2.value = null;
  popupVisible3.value = null;
}

function dongLiMouseEnter() {
  showContentTuo.value = true;
  // emit('dongLi-MouseEnter')
}
// 隐藏弹框
function dongLiMouseLeave() {
  // emit('dongLi-MouseLeave')
  showContentTuo.value = false;
}
function guangDianMouseEnter() {
  showContentguangDian.value = true;
  // emit('guangDian-MouseEnter')
}
// 隐藏弹框
function guangDianMouseLeave() {
  // emit('guangDian-MouseLeave')
  showContentguangDian.value = false;
}
// };

onMounted(() => {
  myChart1 = echarts.init(chartRefo.value);
  myChart1.setOption(option2xxx);
  myChart2 = echarts.init(chartReft.value);
  myChart2.setOption(optionxxx);
  myChart01 = echarts.init(chartRef1.value);
  myChart01.setOption(option2xxx);
  myChart02 = echarts.init(chartRef2.value);
  myChart02.setOption(optionxxx);
  myChart05 = echarts.init(chartRef5.value);
  myChart05.setOption(option2xxx);
  myChart06 = echarts.init(chartRef6.value);
  myChart06.setOption(optionxxx);
});

onUnmounted(() => {
  // clearInterval(animationInterval);
  // myChart.dispose();
  // myChart = null;
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
